body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color:
    rgb(139, 92, 248);
  text-transform: uppercase;
}

.header-layout {
  /* background-color: red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  animation: headerColor 3s infinite alternate;
}

.header-layout .titleName {
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0px 0px 5px orange;
}

.imgAvatar {
  margin: 10px;
  -webkit-animation: jello-horizontal 2s;
  animation: jello-horizontal 2s;
}

.loginButton {
  margin: 10px;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-9-7 12:0:45
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes headerColor {
  0% {
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  }

  50% {
    background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
  }

  100% {
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  }
}